<template>
  <div id="app">
    <Tabbar></Tabbar>
    <div class="view">
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
    <Player></Player>
    <transition name="showPlayingDetail">
      <PalyingSongDetail v-show="showPlayingDetail"></PalyingSongDetail>
    </transition>
    <Desklrc v-show="showDesklrc"></Desklrc>
    <transition name="fade">
      <div class="play-music-list" v-show="PlayMusicListIsShow">
        <PlayMusicList></PlayMusicList>
      </div>
    </transition>
  </div>
</template>

<script>
import Tabbar from "layout/Tabbar";
import Player from "player/player";
import PalyingSongDetail from "components/content/playingSongDetail";
import PlayMusicList from "components/content/playMusicList.vue";
import Desklrc from "components/content/desklrc.vue";
import bus from "utils/bus.js";

export default {
  components: {
    Tabbar,
    Player,
    PalyingSongDetail,
    Desklrc,
    PlayMusicList,
  },
  data() {
    return {
      showPlayingDetail: false,
      showDesklrc: false,
      PlayMusicListIsShow: false,
    };
  },
  created() {
    bus.$on("showPlayingDetail", () => {
      this.showPlayingDetail = !this.showPlayingDetail;
    });
    bus.$on("toggleDesklrc", (b) => {
      this.showDesklrc = b;
    });
    bus.$on("showPlaymusicList", (b) => {
      this.PlayMusicListIsShow = b;
    });
  },
};
</script>

<style lang="less">
@import url("~assets/css/bable.css");
@import url("~assets/css/media-serch.css");
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
@font-face {
  font-family: "iconfont"; /* Project id 2795034 */
  src: url("//at.alicdn.com/t/font_2795034_d8wo21oiz4f.woff2?t=1632388370087")
      format("woff2"),
    url("//at.alicdn.com/t/font_2795034_d8wo21oiz4f.woff?t=1632388370087")
      format("woff"),
    url("//at.alicdn.com/t/font_2795034_d8wo21oiz4f.ttf?t=1632388370087")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.view {
  position: fixed;
  top: 0.575rem;
  bottom: 0.5rem;
  right: 0;
  left: 0;
  // width: 8.333333rem;
  // overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  .content {
    position: absolute;
    left: 3.133333rem;
    top: 0.125rem;
    width: 8.333333rem;
  }
}
.yahei {
  font-family: "yahei";
}

@keyframes show-playing-detail {
  0% {
    top: 6.666667rem;
  }
  100% {
    top: 0.583333rem;
  }
}
.showPlayingDetail-enter-active {
  animation: show-playing-detail 0.5s ease;
}
.showPlayingDetail-leave-active {
  animation: show-playing-detail 0.5s ease reverse;
}

.play-music-list {
  position: absolute;
  z-index: 1001;
  bottom: 63px;
  border-bottom: 0.008333rem solid lightseagreen;
  right: -3px;
  border-radius: 0.083333rem;
  width: 4.166666rem;
  height: 4.166666rem;
  overflow: hidden;
  background-color: #ffffff;
}

@keyframes show-music-list {
  0% {
    right: -4.166667rem;
  }
  100% {
    right: -0.025rem;
  }
}
// .show-list {
//   animation: show-music-list 0.5s ease;
// }
// .hidden-list {
//   animation: show-music-list 0.5s ease;
//   animation-direction: reverse;
// }
.fade-enter-active {
  animation: show-music-list 0.5s ease;
}
.fade-leave-active {
  animation: show-music-list 0.5s ease reverse;
}

html {
  overflow-x: hidden;
}
</style>
